<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>08用户列表</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    #table {
      border: 1px solid #000000;
      width: 600px;
      margin: 20px auto 0;
    }

    .head {
      display: flex;
      background: #e1e1e1;
      height: 30px;
      line-height: 30px;
    }

    .head li {
      flex: 1;
      text-align: center;
    }

    #body li {
      display: flex;
    }

    #body li div {
      flex: 1;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }


    .header {
      height: 80px;
      background-color: #e1e1e1;
      padding: 0 20px;
      /* display: flex;
      align-items: center; */
    }

    .right {
      float: right;
      margin-top: 30px;
      display: none;
    }

    #id span {
      display: none;
    }
  </style>
</head>

<body>

  <div class="header">
    <div id="nologin" class="right">
      <a href="./05用户注册.html">注册</a>|
      <a href="./07用户登录.html">登录</a>
    </div>
    <div id="logined" class="right">
      <span>21321321</span>|
      <span id="logout">退出</span>
    </div>
  </div>

  <div id="table">
    <ul class="head">
      <li id="id">
        用户ID
        <span id="up">↑</span>
        <span id="down">↓</span>
      </li>
      <li>用户名</li>
      <li>用户密码</li>
      <li>手机号</li>
      <li>操作</li>
    </ul>

    <ul id="body">
      <!-- <li>
        <div>1</div>
        <div>test1</div>
        <div>test1</div>
        <div><span>删除</span><span>更新</span></div>
      </li> -->
    </ul>

  </div>
</body>
<script src="./ajax.js"></script>
<script src="./cookie.js"></script>
<script>

  var oNoLogin = document.querySelector('#nologin');
  var oLogined = document.querySelector('#logined');

  var oLogout = document.querySelector('#logout');
  var oBody = document.querySelector('#body');

  var oId = document.querySelector('#id');
  var oUp = document.querySelector('#up');
  var oDown = document.querySelector('#down');

  var num = 0;

  oId.onclick = function () {
    // console.log('升序');
    num++;

    if (num % 3 == 1) {  // 升序
      console.log('升序')
      oUp.style.display = 'inline-block';

      renderList('asc');

    } else if (num % 3 == 2) { // 降序
      console.log('降序');
      oUp.style.display = 'none';
      oDown.style.display = 'inline-block';
      renderList('desc');
    } else {
      console.log('正常');
      oUp.style.display = 'none';
      oDown.style.display = 'none';
      renderList();
    }
  }


  // 判断登录状态
  if (!getCookie('login_user')) {
    // location.href = './07用户登录.html';
    oNoLogin.style.display = 'block';
  } else {
    oLogined.style.display = 'block';
    oLogined.firstElementChild.innerHTML = getCookie('login_user');
  }


  oLogout.onclick = function () {

    removeCookie('login_user');

    location.reload();

  }


  // 事件绑定

  oBody.onclick = function (e) {
    var ev = event || e;
    var target = ev.target || ev.srcElement;

    if (target.className === 'del') {
      // 点击删除按钮
      // console.log(11);

      // target.parentNode.parentNode.remove();

      ajax({
        path: 'http://localhost/1907/24user_del.php',
        data: {
          id: target.getAttribute('data-id')
        },
        successCB: ({ code, msg }) => {
          // console.log(data)

          // {
          //   code: 1
          // }

          if (code == 1) {
            alert(msg);
            target.parentNode.parentNode.remove();
          } else {
            alert(msg);
          }
        }
      })

    }

    if (target.className === 'update') {
      // 更新

      location.href = './12用户更新.html?id=' + target.getAttribute('data-id');
    }

  }

  renderList();


  
  function renderList(order = 'normal') {
    ajax({
      path: 'http://localhost/1907/21mysql_connect.php',
      data: {
        order
      },
      successCB: data => {
        // console.log(data);
        var html = '';
        data.forEach(({ id, username, password, telephone }) => {
          html += `
        <li>
          <div>${id}</div>
          <div>${username}</div>
          <div>${password}</div>
          <div>${telephone}</div>
          <div><span class="del" data-id="${id}">删除</span>|<span class="update" data-id="${id}">更新</span></div>
        </li>
        `
        })

        body.innerHTML = html;

      }
    })
  }
</script>

</html>